<template>
  <div class="spu">
    <el-button type="primary" style="margin-bottom: 30px; float: right">新增商品</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="introduction" label="简介" />
      <el-table-column label="操作" width="200" fixed="right" align="center">
        <template #default="scope">
          <el-button link type="primary" icon="View" @click="viewRowHandler(scope.row)"
            >查看</el-button
          >
          <el-button link type="primary" icon="View" @click="skuRowHandler(scope.row)"
            >前端sku预览</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="Spu">
  import { SpuService } from '@/services';
  import { onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  const tableData = ref([]);
  const initTable = async () => {
    const { result } = await SpuService.getSpuApi();
    tableData.value = result.list;
  };
  const viewRowHandler = (rowData) => {
    router.push({ name: 'spuView', query: { id: rowData.id } });
  };
  const router = useRouter();
  const skuRowHandler = (rowData) => {
    router.push({ name: 'skuView', query: { id: rowData.id } });
  };
  onMounted(() => {
    initTable();
  });
</script>

<style lang="scss" scoped></style>
